<template>
  <div>
    <h1>LOGO M</h1>
    <div class="banner">
      <mt-swipe :auto="4000">
        <mt-swipe-item
          v-for="(item, index) in bannerData"
          :key="index"
        >
          <div class="b-item" :style="`background-image: url(${item.image})`" alt=""></div>
        </mt-swipe-item>
      </mt-swipe>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import { Toast } from 'mint-ui';

export default {
  name: "MHome",
  data() {
    return {
      bannerData: []
    }
  },
  async created() {
    const loading = this.$loading()
    try {
      const res = await axios({
        url: "https://gank.io/api/v2/banners"
      })
      console.log(res.data.data)
      this.bannerData = res.data.data
    } catch (e) {
      Toast('网络错误');
    } finally {
      loading.close();
    }
  }
};
</script>

<style scoped lang="less">
@banner-height: 2rem;
.banner {
  height: @banner-height;
  border-top: 2px solid #42b983;
  border-bottom: 2px solid #42b983;

  .b-item {
    height: @banner-height;
    background: no-repeat center / cover;
  }
}
</style>
